<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
</head>
<body>
<style>
  body{
    background-image: url("img/back.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
  }
  .container{
    width: 400px;
    /*margin 外边距 ，第一个数字上下外边距，第二个数字表示水平外边距，如果水平设置成auto 表示元素水平居中*/
    margin: 0 auto;

  }
  h1{
    text-align: center;
  }
  p{
    text-align: center;
    color:black;
  }
  .row{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row span{
    width: 100px;
  }
  .row input{
    width: 200px;
    height: 20px;
  }

  .row button{
    width: 306px;
    height: 40px;
    color: white;
    background-color: orange;
    border: none;
  }

  .row button:active{
    background-color: black;
  }
</style>
<div class="container">
  <h1>表白墙</h1>
  <p>输入后点击提交,就会把信息显示在表格中</p>
  <div class="row">
    <span>谁：</span><input type="text">
  </div>
<div class="row">
  <span>对谁：</span><input type="text">
</div>
  <div class="row">
    <span>说：</span><input type="text">
  </div>
<div class="row">
  <button>提交</button>
</div>
</div>
<script>
  let container = document.querySelector('.container');
  let button = document.querySelector('button');
  button.onclick = function (){
    //1.获取输入框的内容
    let inputs = document.querySelectorAll('input');
    let from = inputs[0].value;
    let to = inputs[1].value;
    let message = inputs[2].value;
    console.log(from + "," + to + "," + message);
    //2.能够构造出新的div 用来保存用户提交的内容
    let rowDiv =  document.createElement('div');
    rowDiv.className = 'row';
    rowDiv.innerHTML = from + "对" + to + "说: " + message;
    container.appendChild(rowDiv);

  }



</script>


</body>
</html>